import './Scss/WebTheme.scss'
import { Http } from '../../../Api'
import { Button, Radio, Input, Switch, message } from 'antd'
import { BackImageUrl, WebThemeBackImage, temporaryData as DefaultData } from './Theme/Common'
import { ThemeTypeData, ThemeTypeDescriptive } from './Theme/ThemeTypeList'
import { useState } from 'react'
import { useEventEmitter, useSetState, useLocalStorageState, useRequest, useSessionStorageState } from 'ahooks'
import { ModalBox } from '../../../Modal/ModalBox'
import { ThemeColorButton, optionsWithDisabled } from './Theme/Color'
import { HeaderOptionList } from './Theme/HeaderOptions'
import { HeaderUserInfo } from './Theme/HeaderUserInfo'

export const WebTheme = () => {
    const [temporaryData] = useSessionStorageState('temporaryData')
    const [ClientData] = useLocalStorageState('ClientData')
    const { runAsync } = useRequest(Http, { manual: true })
    const [messageApi, contextHolder] = message.useMessage()
    const [ThemeData, setThemeData] = useSetState(temporaryData || DefaultData)
    const [ModalData, setModalData] = useState()
    const ModalEvent = useEventEmitter()

    ModalEvent.useSubscription(val => setThemeData(val))

    const SubmitSetup = () => {
        const [uuid] = Object.keys(ClientData.project)
        runAsync({
            url: 'posSaveJsonInfoByUuid',
            data: JSON.stringify(JSON.stringify(ThemeData)),
            path: [`theme${uuid}`],
        }).then(() => messageApi.success('主题保存成功,重新登录后更新样式.'))
    }

    return (
        <div className="WebTheme">
            {contextHolder}
            <div className="ClassType shadowBox-001">
                <div
                    onClick={() => {
                        setModalData({
                            type: 'ThemeTypeSelect',
                            data: {
                                title: '选择样式',
                                width: 1552,
                                type: ThemeData.layoutStyle,
                                img: ThemeData.backImage,
                                theme: ThemeData.themeColor,
                            },
                        })
                    }}
                >
                    <ThemeTypeData
                        theme={ThemeData.themeColor}
                        type={ThemeData.layoutStyle}
                        img={ThemeData.backImage}
                    />
                </div>
                <div
                    className="TypeBackImage"
                    onClick={() => {
                        setModalData({
                            type: 'ThemeBackImageSelect',
                            data: {
                                title: '选择背景图片',
                                width: 1552,
                                img: ThemeData.backImage,
                                theme: ThemeData.themeColor,
                            },
                        })
                    }}
                >
                    {ThemeData.backImage ? (
                        <img src={`${BackImageUrl}${WebThemeBackImage[ThemeData.backImage]}`} alt="" />
                    ) : (
                        <div style={{ '--theme': ThemeData.themeColor }} />
                    )}
                </div>
                <div className="TypeContent">
                    <div> {ThemeTypeDescriptive[ThemeData.layoutStyle].title} </div>
                    <div> {ThemeTypeDescriptive[ThemeData.layoutStyle].content} </div>
                </div>
            </div>

            <div className="ThemeType shadowBox-001">
                <div>
                    <div>主题颜色 : </div>
                    <ThemeColorButton
                        ModalEvent={ModalEvent}
                        theme={ThemeData.themeColor}
                        text={ThemeData.textColor}
                        type={0}
                    />
                </div>
                <div>
                    <div>字体颜色 : </div>
                    <Radio.Group
                        options={optionsWithDisabled}
                        onChange={e => {
                            setThemeData({ textColor: e.target.value })
                        }}
                        value={ThemeData.textColor}
                        optionType="button"
                        buttonStyle="solid"
                    />
                </div>
                <Button type="link">高级设置</Button>
            </div>

            <div className="Options shadowBox-001">
                <div>
                    <div>标题内容 : </div>
                    <Input
                        placeholder="项目主标题 Ps:不填为项目默认标题"
                        value={ThemeData.heading}
                        bordered={false}
                        onChange={e => setThemeData({ heading: e.target.value })}
                    />
                </div>
                <div>
                    <div>副标题状态 : </div>
                    <Switch
                        checkedChildren="开启"
                        unCheckedChildren="关闭"
                        checked={ThemeData.subtitleStatus}
                        onChange={e => setThemeData({ subtitleStatus: e })}
                    />
                </div>
                {ThemeData.subtitleStatus && (
                    <div>
                        <div>副标题内容 : </div>
                        <Input
                            placeholder="项目副标题"
                            value={ThemeData.subtitle}
                            bordered={false}
                            onChange={e => setThemeData({ subtitle: e.target.value })}
                        />
                    </div>
                )}
            </div>

            <div className="Options shadowBox-001">
                <div>
                    <div>操作按钮 : </div>
                    <div className="OptionsBox" style={{ '--theme': ThemeData.themeColor }}>
                        <HeaderOptionList configuration={true} data={ThemeData.HeaderOptionsSet} />
                        <Button
                            type="link"
                            onClick={() => {
                                setModalData({
                                    type: 'HeaderOptionsSet',
                                    data: {
                                        title: '设置操作栏',
                                        width: 1200,
                                        sort: ThemeData.HeaderOptionsSet,
                                    },
                                })
                            }}
                        >
                            编辑按钮
                        </Button>
                    </div>
                </div>
            </div>

            <div className="Options shadowBox-001">
                <div>
                    <div>个人中心 : </div>
                    <div className="OptionsBox" style={{ '--theme': ThemeData.themeColor }}>
                        <HeaderUserInfo configuration={true} data={ThemeData.HeaderUserInfoSet} />
                        <Button
                            type="link"
                            onClick={() => {
                                setModalData({
                                    type: 'HeaderUserInfoSet',
                                    data: {
                                        title: '设置个人中心',
                                        width: 1200,
                                        sort: ThemeData.HeaderUserInfoSet,
                                    },
                                })
                            }}
                        >
                            编辑按钮
                        </Button>
                    </div>
                </div>
            </div>

            {/* Menu设置 */}
            {/* <div className="Options shadowBox-001">
                <div>
                    <div>菜单状态 : </div>
                    <Switch
                        checkedChildren="开启"
                        unCheckedChildren="关闭"
                        checked={ThemeData.TableMenuBtnDefault}
                        onChange={e => setThemeData({ TableMenuBtnDefault: e })}
                    />
                </div>
                <div>
                    <div>菜单按钮 : </div>
                    <Switch
                        checkedChildren="开启"
                        unCheckedChildren="关闭"
                        checked={ThemeData.TableMenuBtnStatus}
                        onChange={e => setThemeData({ TableMenuBtnStatus: e })}
                    />
                </div>
            </div> */}

            {/* Table设置 */}
            {/* <div className="Options shadowBox-001">
                <div>
                    <div>Table状态 : </div>
                    <div>0/1</div>
                </div>
                <div>
                    <div>Table操作 : </div>
                    <div>按钮组</div>
                </div>
            </div> */}

            <div className="Submit">
                <Button type="primary" onClick={SubmitSetup}>
                    保存
                </Button>
            </div>
            {/* 弹出层 */}
            <ModalBox ModalEvent={ModalEvent} OptionsCall={ModalData} />
        </div>
    )
}
